<template>
    <div class="p-2">
        <el-card shadow="never">
            <template #header>
                <el-button @click="$router.back()" type="danger" icon="Back" plain>返回</el-button>
            </template>

            <el-row>
                <el-col :span="12">
                    <el-descriptions direction="vertical" :column="6" border>
                        <el-descriptions-item label="流程" align="center">操作</el-descriptions-item>
                        <el-descriptions-item label="制单" align="center">已完成</el-descriptions-item>
                        <el-descriptions-item label="半成品生产" align="center">未开始</el-descriptions-item>
                        <el-descriptions-item label="通用部件采购" align="center">未开始</el-descriptions-item>
                        <el-descriptions-item label="包装" align="center">无包装件</el-descriptions-item>
                        <el-descriptions-item label="成品组装" align="center">无包装件</el-descriptions-item>
                    </el-descriptions>
                    <div class="mt10 mb10" style="text-align: center;">生产工单</div>
                    <el-descriptions :column="2" border>
                        <el-descriptions-item label="产品图片" width="80" :span="3" align="center">
                            <img style="width: 200px;"
                                src="https://plus.unsplash.com/premium_photo-1725708358944-844db020a73a?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
                                alt="">
                        </el-descriptions-item>
                        <el-descriptions-item label="产品备注" width="80" :span="3" align="center">
                        </el-descriptions-item>
                        <el-descriptions-item label="订单备注" width="80" :span="3" align="center">
                        </el-descriptions-item>
                        <el-descriptions-item label="产品名称" width="80" align="center"></el-descriptions-item>
                        <el-descriptions-item label="制单日期" width="80" align="center"></el-descriptions-item>
                        <el-descriptions-item label="客户名称" align="center"></el-descriptions-item>
                        <el-descriptions-item label="交付日期" align="center"></el-descriptions-item>
                        <el-descriptions-item label="生产数量" align="center"></el-descriptions-item>
                        <el-descriptions-item label="装箱数星" align="center"></el-descriptions-item>
                        <el-descriptions-item label="外箱型号" align="center"></el-descriptions-item>
                        <el-descriptions-item label="热收缩" align="center"></el-descriptions-item>
                        <el-descriptions-item label="组装工费" align="center"></el-descriptions-item>
                        <el-descriptions-item label="热收缩工费" align="center"></el-descriptions-item>
                    </el-descriptions>
                </el-col>
                <el-col :span="12">
                    <el-descriptions direction="vertical" :column="1" border>
                        <el-descriptions-item label="生产流程信息" align="center">
                            <div>
                                <el-table :data="tableData">
                                    <el-table-column prop="date" label="工序" />
                                    <el-table-column prop="name" label="开始日期" />
                                    <el-table-column prop="date" label="开始时间" />
                                    <el-table-column prop="name" label="操作人" />
                                    <el-table-column prop="date" label="结束日期" />
                                    <el-table-column prop="name" label="结束时间" />
                                    <el-table-column prop="date" label="操作人" />
                                    <el-table-column prop="name" label="完工数量" />
                                </el-table>
                            </div>
                        </el-descriptions-item>
                    </el-descriptions>
                    <div class="mt10 mb10" style="text-align: center;">产品配件信息</div>
                    <el-descriptions direction="vertical" :column="8" border>
                        <el-descriptions-item label="部件名称" :span="3" align="center">
                            <el-descriptions :column="1" border>
                                <el-descriptions-item label="半成品" align="center">1悟桐树F款抽屉盒(6人份)</el-descriptions-item>
                                <el-descriptions-item label="半成品" align="center">1悟桐树F款抽屉盒(6人份)</el-descriptions-item>
                                <el-descriptions-item label="包装件" align="center"></el-descriptions-item>
                                <el-descriptions-item label="通用部件" align="center"></el-descriptions-item>
                                <el-descriptions-item label="通用部件" align="center"></el-descriptions-item>
                            </el-descriptions>
                        </el-descriptions-item>
                        <el-descriptions-item label="总需数量" align="center">
                            <el-descriptions :column="1" border class="nodeLabel">
                                <el-descriptions-item align="center">500</el-descriptions-item>
                                <el-descriptions-item align="center">500</el-descriptions-item>
                                <el-descriptions-item align="center">500</el-descriptions-item>
                                <el-descriptions-item align="center">500</el-descriptions-item>
                                <el-descriptions-item align="center">500</el-descriptions-item>
                            </el-descriptions>
                        </el-descriptions-item>
                        <el-descriptions-item label="配货数量" align="center">
                            <el-descriptions :column="1" border class="nodeLabel">
                                <el-descriptions-item align="center">500</el-descriptions-item>
                                <el-descriptions-item align="center">500</el-descriptions-item>
                                <el-descriptions-item align="center">500</el-descriptions-item>
                                <el-descriptions-item align="center">500</el-descriptions-item>
                                <el-descriptions-item align="center">500</el-descriptions-item>
                            </el-descriptions>
                        </el-descriptions-item>
                        <el-descriptions-item label="是否替换" align="center">
                            <el-descriptions :column="1" border class="nodeLabel">
                                <el-descriptions-item align="center">否</el-descriptions-item>
                                <el-descriptions-item align="center">替换</el-descriptions-item>
                                <el-descriptions-item align="center">否</el-descriptions-item>
                                <el-descriptions-item align="center">替换</el-descriptions-item>
                                <el-descriptions-item align="center">替换</el-descriptions-item>
                            </el-descriptions>
                        </el-descriptions-item>
                        <el-descriptions-item label="替换部件名称" align="center">
                            <el-descriptions :column="1" border class="nodeLabel">
                                <el-descriptions-item align="center">
                                    <div class="heightItem"></div>
                                </el-descriptions-item>
                                <el-descriptions-item align="center" >
                                    <div class="heightItem">通版F款抽屉盒通版F款抽屉盒通版F款抽屉盒</div>
                                </el-descriptions-item>
                                <el-descriptions-item align="center">
                                    <div class="heightItem"></div>
                                </el-descriptions-item>
                                <el-descriptions-item align="center">
                                    <div class="heightItem"></div>
                                </el-descriptions-item>
                                <el-descriptions-item align="center">
                                    <div class="heightItem"></div>
                                </el-descriptions-item>
                            </el-descriptions>
                        </el-descriptions-item>
                        <el-descriptions-item label="配货数量" align="center">
                            <el-descriptions :column="1" border class="nodeLabel">
                                <el-descriptions-item align="center">500</el-descriptions-item>
                                <el-descriptions-item align="center">500</el-descriptions-item>
                                <el-descriptions-item align="center">500</el-descriptions-item>
                                <el-descriptions-item align="center">500</el-descriptions-item>
                                <el-descriptions-item align="center">500</el-descriptions-item>
                            </el-descriptions>
                        </el-descriptions-item>
                    </el-descriptions>
                </el-col>
            </el-row>
        </el-card>

        <FinishedProductAssembly :visible="finishedShow" @close="finishedShow = false" />
    </div>
</template>
<script setup lang="ts">
import FinishedProductAssembly from './components/finishedProductAssembly.vue'

const finishedShow = ref(false);

const tableData = [
    {
        date: '2016-05-03',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        date: '2016-05-02',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        date: '2016-05-04',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        date: '2016-05-01',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
]
</script>
<style lang="scss" scoped>
.order-table {
    border-spacing: 0;
    border: 1px solid #BFBFBF;
    width: 80%;
    font-size: 20px;

    tr {
        border: 1px solid #BFBFBF;
    }

    td:not(.step-col) {
        border: 1px solid #BFBFBF;
        text-align: center;
    }

    .step-col {
        border: 1px solid #BFBFBF;
        padding: 10px 10px 0 10px;
    }
}




::v-deep .is-bordered-label {
    background-color: #FFFFFF !important;
}

::v-deep .nodeLabel .el-descriptions__label {
    display: none !important;
}

.heightItem {
    height: 23px !important;
    width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
</style>